<template>
  <div class="tendency" v-if="checked">
    <span style="color: #4db803" class="items-tendency" v-if="state == 2">
      <RiseOutlined style="margin-right: 6px" />{{ data }}%</span
    >
    <span style="color: #ff522b" class="items-tendency" v-if="state == 1">
      <FallOutlined style="margin-right: 6px" />{{ data }}%</span
    >
  </div>
</template>

<script setup lang="ts">
  import { FallOutlined, RiseOutlined } from '@ant-design/icons-vue';
  defineProps({
    state: {
      type: Number,
      default: 0,
    },
    data: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: false,
    },
  });
</script>

<style lang="less" scoped>
  .tendency {
    display: flex;
    align-items: center;

    .items-tendency {
      margin-left: 18px;
      display: flex;
      align-items: center;
    }
  }
</style>
